/* Icons are from Open Iconic <https://useiconic.com/open/>.
   Licensed under the MIT License. */
:root {
    --icon-filter: invert(0);
    --icon-highlight: var(--secondary-color);
    --elapsed-color: #666;
}

/* @media (prefers-color-scheme: dark) { */

[data-theme="dark"] {
    --icon-filter: invert(1);
    --icon-highlight: #a39990;
    --elapsed-color: #999;
}

/* Containers */
.suite, .test, #errors {
    border-color: #ccc; /* Fallback value */
    border-color: var(--secondary-color);
    border-width: 1px;
    border-style: solid;
    padding: 0.3em 0.2em;
    margin: 0.2em 0;
}
.test {
    border-style: dashed;
}
#errors, .messages {
    width: 100%;
    border-spacing: 0;
}
.children {
    display: none;
    margin-left: 1.4em;
}
.suite, .test, .keyword {
    margin-left: -0.2em;
}
#s1, .suite > .children > .keyword {
    margin-left: 0;
}
/* Suite, test and kw headers */
.element-header {
    border: 1px solid transparent;
    border-radius: 2px;
    position: relative;
}
.element-header:hover {
    cursor: pointer;
    background-color: #eee; /* Fallback value */
    background-color: var(--highlight-color);
    border-color: #ccc; /* Fallback value */
    border-color: var(--secondary-color);
}
.element-header-toggle {
    position: absolute;
    left: 3px;
    top: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url();
    background-image: url(), none;
    filter: var(--icon-filter);
    height: 10px;
    width: 10px;
    background-size: 6px 6px;
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.closed > .element-header-toggle {
    background-image: url();
    background-image: url(), none;
}
.element-header:hover > .element-header-toggle {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
}
.element-header-right:hover ~ .element-header-toggle {
    background-color: transparent;
}
.element-header-left {
    padding: 3px 80px 3px 20px;
}
.element-header-right {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px;
    cursor: default;
}
.element-header .label {
    margin-right: 0.5em;
}
.name {
    font-weight: bold;
    white-space: pre-wrap;
}
.arg, .assign {
    white-space: pre-wrap;
}
.elapsed {
    float: right;
    color: #666; /* Fallback value */
    color: var(--elapsed-color);
    padding-left: 1em;
}
.link {
    background-image: url();
    background-image: url(), none;
    filter: var(--icon-filter);
}
.expand {
    background-image: url();
    background-image: url(), none;
    filter: var(--icon-filter);
}
.collapse {
    background-image: url();
    background-image: url(), none;
    filter: var(--icon-filter);
}
.expand, .collapse, .link {
    float: left;
    display: block;
    visibility: hidden;
    margin: 0 4px;
    height: 14px;
    width: 14px;
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: center;
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.link {
    background-size: 10px 10px;
}
.element-header:hover a {
    visibility: visible;
}
.expand:hover, .collapse:hover, .link:hover {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
}
/* Messages and errors */
.messages .time, .messages .message {
    font-family: monospace;
    font-size: 1.1em;
}
#errors .message {
    font-family: monospace;
    font-size: 1.2em;
}
.message-row {
    height: 20px;
}
.time {
    width: 7.5em;
}
.error-time {
    width: 11em;
    font-size: 0.9em;
    white-space: nowrap;
}
.level {
    width: 5em;
    text-align: center;
}
.select-message {
    width: 24px;
}
.select-message > div {
    float: right;
    margin-right: 2px;
    height: 16px;
    width: 16px;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}
.message-row:hover .select-message div {
    background-image: url();
    background-image: url(), none;
    filter: var(--icon-filter);
    border-color: #ccc; /* Fallback value */
    border-color: var(--icon-highlight);
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.select-message:hover div {
    background-color: #ccc; /* Fallback value */
    background-color: var(--icon-highlight);
    cursor: pointer;
}
/* Message tables - these MUST NOT be combined together because otherwise
   dynamically altering them based on visible log level is not possible. */
.trace-message {
    display: table;
}
.debug-message {
    display: table;
}
/* Metadata */
.metadata {
    width: 100%;
    border-spacing: 0.2em;
}
.metadata th {
    width: 12em;
    vertical-align: top;
    text-align: left;
}
.metadata td {
    vertical-align: top;
}
.keyword-metadata {
    font-size: 0.9em;
}
/* Custom styles for statistics */
#total-stats tr:hover, #tag-stats tr:hover {
    cursor: default;
}
